import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Carousel, WhiteSpace } from "weaver-mobile";
import "./index.less";
import { getMeetingInfo } from "../../api/index";

@withRouter
export default class MeetingDetail extends Component {
  state = {
    meetingInfo: null,
  };

  loadMeetingInfo(id) {
    getMeetingInfo({ id: id }).then((result) => {
      if (result.ret == 200) {
        console.log(result.data);
        this.setState({
          meetingInfo: result.data,
        });
        console.log(result.data);
      }
    });
  }

  componentDidMount() {
    document.title = "会议详情";
    this.loadMeetingInfo(this.props.match.params.id);
  }

  render() {
    if (this.state.meetingInfo == null) {
      return <div>加载中...</div>;
    }
    return (
      <div className="meeting-detail">
        {/* <div>
          <NavBar
            className="nav-bar"
            icon={<Icon type="left" />}
            leftContent="返回"
            onLeftClick={() => console.log("onLeftClick")}
          >
            会议详情
          </NavBar>
        </div> */}
        <div className="page">
          <img
            // key={img}
            src={`/images/detail${this.state.meetingInfo.meetingType + 1}.png`}
            alt=""
            style={{ width: "100%", verticalAlign: "top" }}
          />
          {/* <Carousel autoplay={false} infinite>
            {this.state.meetingInfo.imgs.map((img) => {
              return (
                <img
                  key={img}
                  src={"/images/detail1.png"}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                />
              );
            })}
          </Carousel> */}
          <WhiteSpace size="lg" />
          <div className="main">
            <div className="title">{this.state.meetingInfo.title}</div>
            <div className="m-time">
              <div className="start">
                <div className="time">
                  {this.state.meetingInfo.meetingStartDate.split(" ")[1]}
                </div>
                <div className="date">
                  {" "}
                  {this.state.meetingInfo.meetingStartDate.split(" ")[0]}
                </div>
              </div>
              <div className="center">
                {this.state.meetingInfo.isStart ? (
                  <div className="status">已开始</div>
                ) : (
                  <div className="status not-start">未开始</div>
                )}

                <div className="duration">
                  <div className="text">
                    {this.state.meetingInfo.hours + "小时"}
                  </div>
                </div>
                <div className="time-zone">(GMT+08:00)</div>
              </div>
              <div className="end">
                <div className="time">
                  {this.state.meetingInfo.meetingEndDate.split(" ")[1]}
                </div>
                <div className="date">
                  {this.state.meetingInfo.meetingEndDate.split(" ")[0]}
                </div>
              </div>
            </div>
            <div className="info">
              <div className="label">报名日期：</div>
              <div className="content">
                报名截止日期 {this.state.meetingInfo.enrollEndDate}
              </div>
            </div>
            <div className="info">
              <div className="label">会议地址：</div>
              <div className="content">
                {this.state.meetingInfo.detailAddress}
              </div>
            </div>
          </div>
          <WhiteSpace size="lg" />
          <div className="introduction">
            <div className="title">会议简介:</div>
            <div
              className="content"
              dangerouslySetInnerHTML={{
                __html: this.state.meetingInfo.content,
              }}
            ></div>
          </div>
        </div>
        <div className="footer">
          {this.state.meetingInfo.meetingType == 0 ? (
            <div className="btn">参会报名</div>
          ) : this.state.meetingInfo.meetingType == 1 ? (
            <div className="btn">扫码签到</div>
          ) : (
            <div className="btn">查看直播</div>
          )}
        </div>
      </div>
    );
  }
}
